﻿<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生管理</title>
    <jsp:include page="/resources/inc/head.jsp" flush="true"/>
</head>
<body class="md-skin">
<div class="wrapper wrapper-content animated fadeInRight">
    <div id="toolbar">
        <shiro:hasPermission name="sch:student:create"><a class="waves-effect waves-button" href="javascript:;"
                                                          onclick="createAction()"><i class="zmdi zmdi-plus"></i>
            新增学生</a></shiro:hasPermission>
        <shiro:hasPermission name="sch:student:update"><a class="waves-effect waves-button" href="javascript:;"
                                                          onclick="updateAction()"><i class="zmdi zmdi-edit"></i>
            编辑学生</a></shiro:hasPermission>
        <shiro:hasPermission name="sch:student:delete"><a class="waves-effect waves-button" href="javascript:;"
                                                          onclick="deleteAction()"><i class="zmdi zmdi-close"></i>
            删除学生</a></shiro:hasPermission>
    </div>

    <div id="contact" class="row">

    </div>

    <div class="fixed-table-pagination">
        <div class="pull-left pagination-detail"><span class="pagination-info">显示第 1 到第 10 条记录，总共 2990 条记录</span><span
                class="page-list">每页显示 <span class="btn-group dropup"><button type="button"
                                                                              class="btn btn-default dropdown-toggle"
                                                                              data-toggle="dropdown"><span
                class="page-size">10</span> <span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li
                role="menuitem" class="active"><a href="#">10</a></li><li role="menuitem"><a href="#">25</a></li><li
                role="menuitem"><a href="#">50</a></li><li role="menuitem"><a
                href="#">100</a></li></ul></span> 条记录</span></div>
        <div class="pull-right pagination">
            <ul class="pagination">
                <li class="page-pre disabled"><a href="#">‹</a></li>
                <li class="page-number active"><a href="#">1</a></li>
                <li class="page-number"><a href="#">2</a></li>
                <li class="page-number"><a href="#">3</a></li>
                <li class="page-number"><a href="#">4</a></li>
                <li class="page-number"><a href="#">5</a></li>
                <li class="page-last-separator disabled"><a href="#">...</a></li>
                <li class="page-last"><a href="#">299</a></li>
                <li class="page-next"><a href="#">›</a></li>
            </ul>
        </div>
    </div>
</div>

<jsp:include page="/resources/inc/footer.jsp" flush="true"/>

<script>
    $(function () {
        loadList();
    });

    function loadList() {
        $.ajax({
            type: 'get',
            url: '${basePath}/manage/student/list',
            data: {"offset": 0, "limit": 10, "sort": null, "order": null},
            success: function (result) {
                var cardHtml = "";
                for (var index in result.rows) {
                    cardHtml += " <div class=\"col-lg-4\">";
                    cardHtml += "  <div class=\"contact-box\">";
                    cardHtml += " <a href=\"${basePath}/manage/student/profile/" + result.rows[index].studentId + "\">";
                    cardHtml += " <div class=\"col-sm-4\">";
                    cardHtml += "  <div class=\"text-center\">";
                    cardHtml += "  <img alt=\"image\" class=\"img-circle m-t-xs img-responsive\" src=\"" + result.rows[index].avatar + "\">";
                    cardHtml += "  <div class=\"m-t-xs font-bold\">Graphics designer</div>";
                    cardHtml += " </div>";
                    cardHtml += "</div>";
                    cardHtml += "<div class=\"col-sm-8\">";
                    cardHtml += "    <h3><strong>" + result.rows[index].name + "</strong></h3>";
                    cardHtml += " <p><i class=\"fa fa-map-marker\"></i> "+ result.rows[index].address + "</p>";
                    cardHtml += " <address>";
                    cardHtml += " <strong>"+ result.rows[index].className + "</strong><br>";
                    cardHtml += " " + result.rows[index].enrolmentTime +"<br>";
                    cardHtml += " " + result.rows[index].idNumber + "<br>";
                    cardHtml += "<abbr title=\"Phone\">ID:</abbr> " + result.rows[index].idNumber;
                    cardHtml += " </address>";
                    cardHtml += " </div>";
                    cardHtml += "  <div class=\"clearfix\"></div>";
                    cardHtml += "     </a>";
                    cardHtml += "   </div>";
                    cardHtml += "   </div> ";

                }
                $("#contact").append(cardHtml);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $.confirm({
                    theme: 'dark',
                    animation: 'rotateX',
                    closeAnimation: 'rotateX',
                    title: false,
                    content: textStatus,
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button waves-light'
                        }
                    }
                });
            }
        });
    }


    // 格式化操作按钮
    function actionFormatter(value, row, index) {
        return [
            '<a class="update" href="javascript:;" onclick="updateAction(' + row.studentId + ')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
            '<a class="delete" href="javascript:;" onclick="deleteAction(' + row.studentId + ')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }

    // 格式化类型
    function sexFormatter(value, row, index) {
        if (value == 1) {
            return '<span class="label label-primary">男</span>';
        }
        if (value == 2) {
            return '<span class="label label-danger">女</span>';
        }
    }

    // 格式化状态
    function statusFormatter(value, row, index) {
        if (value == -1) {
            return '<span class="label label-danger">删除</span>';
        }
        if (value == 1) {
            return '<span class="label label-primary">正常</span>';
        }
    }

    // 格式化时间
    function timeFormatter(value, row, index) {
        return new Date(value).toLocaleString();
    }

    // 新增
    var createDialog;

    function createAction() {
        createDialog = $.dialog({
            theme: 'Material',
            animation: 'RotateXR',
            animationSpeed: 300,
            keyboardEnabled: true,
            columnClass: 'col-md-10 col-md-offset-1',
            title: '新增学生',
            content: 'url:${basePath}/manage/student/create',
            onContentReady: function () {
                initMaterialInput();
                $('select').select2();
                initUploader();
            }
        });
    }

    // 编辑动作
    var updateDialog;

    function updateAction(studentId) {
        if (studentId != null) {
            doUpdate(studentId);
        } else {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length != 1) {
                $.confirm({
                    title: false,
                    content: '请选择一条记录！',
                    autoClose: 'cancel|3000',
                    backgroundDismiss: true,
                    buttons: {
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            } else {
                doUpdate(rows[0].studentId);
            }
        }
    }

    // 更新数据
    function doUpdate(studentId) {
        updateDialog = $.dialog({
            theme: 'Material',
            animation: 'RotateXR',
            animationSpeed: 300,
            keyboardEnabled: true,
            columnClass: 'col-md-10 col-md-offset-1',
            title: '编辑学生',
            content: 'url:${basePath}/manage/student/update/' + studentId,
            onContentReady: function () {
                initMaterialInput();
                $('select').select2();
                initUploader();
            }
        });
    }

    // 删除动作
    var deleteDialog;

    function deleteAction(studentId) {
        if (studentId != null) {
            var ids = new Array();
            ids.push(studentId);
            doDelete(ids);
        } else {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length == 0) {
                $.confirm({
                    title: false,
                    content: '请至少选择一条记录！',
                    autoClose: 'cancel|3000',
                    backgroundDismiss: true,
                    buttons: {
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            } else {
                var ids = new Array();
                for (var i in rows) {
                    ids.push(rows[i].studentId);
                }
                doDelete(ids);
            }
        }
    }

    //删除数据
    function doDelete(ids) {
        deleteDialog = $.confirm({
            type: 'red',
            animationSpeed: 300,
            title: false,
            content: '确认删除该学生吗？',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'waves-effect waves-button',
                    action: function () {
                        $.ajax({
                            type: 'get',
                            url: '${basePath}/manage/student/delete/' + ids.join("-"),
                            success: function (result) {
                                if (result.code != 1) {
                                    if (result.data instanceof Array) {
                                        $.each(result.data, function (index, value) {
                                            $.confirm({
                                                theme: 'dark',
                                                animation: 'rotateX',
                                                closeAnimation: 'rotateX',
                                                title: false,
                                                content: value.errorMsg,
                                                buttons: {
                                                    confirm: {
                                                        text: '确认',
                                                        btnClass: 'waves-effect waves-button waves-light'
                                                    }
                                                }
                                            });
                                        });
                                    } else {
                                        $.confirm({
                                            theme: 'dark',
                                            animation: 'rotateX',
                                            closeAnimation: 'rotateX',
                                            title: false,
                                            content: result.data.errorMsg,
                                            buttons: {
                                                confirm: {
                                                    text: '确认',
                                                    btnClass: 'waves-effect waves-button waves-light'
                                                }
                                            }
                                        });
                                    }
                                } else {
                                    deleteDialog.close();
                                    $table.bootstrapTable('refresh');
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                $.confirm({
                                    theme: 'dark',
                                    animation: 'rotateX',
                                    closeAnimation: 'rotateX',
                                    title: false,
                                    content: textStatus,
                                    buttons: {
                                        confirm: {
                                            text: '确认',
                                            btnClass: 'waves-effect waves-button waves-light'
                                        }
                                    }
                                });
                            }
                        });
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    }

</script>
</body>
</html>